<template>
  <div class="doctor-dashboard">
    <h1>Doctor Dashboard</h1>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>Upcoming Appointments</span>
              <el-button class="button" text>View All</el-button>
            </div>
          </template>
          <div v-if="upcomingAppointments.length">
            <el-timeline>
              <el-timeline-item
                v-for="appointment in upcomingAppointments"
                :key="appointment.id"
                :timestamp="formatDateTime(appointment.date, appointment.startTime)"
                placement="top"
              >
                <el-card>
                  <h4>Patient: {{ appointment.patientName }}</h4>
                  <p>ID: {{ appointment.patientId }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <el-empty v-else description="No upcoming appointments" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>Recent Patients</span>
              <el-button class="button" text>View All</el-button>
            </div>
          </template>
          <div v-if="recentPatients.length">
            <el-table :data="recentPatients" style="width: 100%">
              <el-table-column prop="name" label="Name" />
              <el-table-column prop="date" label="Last Visit">
                <template #default="scope">
                  {{ formatDate(scope.row.date) }}
                </template>
              </el-table-column>
              <el-table-column width="80">
                <template #default="scope">
                  <el-button link type="primary" @click="viewPatientDetails(scope.row.id)">
                    View
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-empty v-else description="No recent patients" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>Quick Actions</span>
            </div>
          </template>
          <div class="quick-actions">
            <router-link to="/doctor/treatment">
              <el-button type="primary" plain>New Treatment</el-button>
            </router-link>
            <router-link to="/doctor/history">
              <el-button type="info" plain>View Order History</el-button>
            </router-link>
            <el-button type="success" plain @click="viewSchedule">My Schedule</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>Today's Schedule</span>
            </div>
          </template>
          <div v-if="todaySchedule">
            <div class="schedule-info">
              <el-descriptions :column="3" border>
                <el-descriptions-item label="Date">{{ formatDate(todaySchedule.date) }}</el-descriptions-item>
                <el-descriptions-item label="Start Time">{{ todaySchedule.startTime }}</el-descriptions-item>
                <el-descriptions-item label="End Time">{{ todaySchedule.endTime }}</el-descriptions-item>
                <el-descriptions-item label="Current Patients">{{ todaySchedule.currentPatients }}</el-descriptions-item>
                <el-descriptions-item label="Max Patients">{{ todaySchedule.maxPatients }}</el-descriptions-item>
                <el-descriptions-item label="Status">
                  <el-tag :type="getStatusType(todaySchedule)">{{ getStatusText(todaySchedule) }}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            
            <h3 style="margin-top: 20px;">Patient List</h3>
            <el-table :data="todayPatients" style="width: 100%">
              <el-table-column prop="name" label="Name" />
              <el-table-column prop="time" label="Time" />
              <el-table-column prop="status" label="Status">
                <template #default="scope">
                  <el-tag :type="getPatientStatusType(scope.row.status)">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column width="180">
                <template #default="scope">
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click="startTreatment(scope.row.id)"
                    :disabled="scope.row.status !== 'Waiting'"
                  >
                    Start Treatment
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-empty v-else description="No schedule for today" />
        </el-card>
      </el-col>
      
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>Recent Activity</span>
            </div>
          </template>
          <div v-if="recentActivities.length">
            <el-timeline>
              <el-timeline-item
                v-for="activity in recentActivities"
                :key="activity.id"
                :timestamp="formatDateTime(activity.date, activity.time)"
                :type="getActivityType(activity.type)"
              >
                {{ activity.description }}
              </el-timeline-item>
            </el-timeline>
          </div>
          <el-empty v-else description="No recent activities" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

const router = useRouter()

// Mock data for development
const upcomingAppointments = ref([
  { id: 1, patientId: 'P001', patientName: 'John Doe', date: '2025-04-12', startTime: '09:30' },
  { id: 2, patientId: 'P002', patientName: 'Jane Smith', date: '2025-04-12', startTime: '10:15' },
  { id: 3, patientId: 'P003', patientName: 'Robert Johnson', date: '2025-04-13', startTime: '14:00' }
])

const recentPatients = ref([
  { id: 1, name: 'Mary Williams', date: '2025-04-10' },
  { id: 2, name: 'David Brown', date: '2025-04-09' },
  { id: 3, name: 'Sarah Miller', date: '2025-04-08' },
  { id: 4, name: 'Michael Davis', date: '2025-04-07' }
])

const todaySchedule = ref({
  id: 1,
  date: '2025-04-11',
  startTime: '08:30',
  endTime: '17:30',
  currentPatients: 12,
  maxPatients: 20
})

const todayPatients = ref([
  { id: 1, name: 'Alice Johnson', time: '09:00', status: 'Completed' },
  { id: 2, name: 'Bob Anderson', time: '09:30', status: 'In Progress' },
  { id: 3, name: 'Carol Thompson', time: '10:00', status: 'Waiting' },
  { id: 4, name: 'Dan Wilson', time: '10:30', status: 'Waiting' },
  { id: 5, name: 'Ella Garcia', time: '11:00', status: 'Waiting' }
])

const recentActivities = ref([
  { id: 1, type: 'treatment', description: 'Completed treatment for Alice Johnson', date: '2025-04-11', time: '09:15' },
  { id: 2, type: 'order', description: 'Prescribed medication for Bob Anderson', date: '2025-04-11', time: '09:45' },
  { id: 3, type: 'schedule', description: 'Schedule updated for next week', date: '2025-04-10', time: '16:30' },
  { id: 4, type: 'treatment', description: 'Completed treatment for Mary Williams', date: '2025-04-10', time: '11:20' }
])

onMounted(() => {
  // In a real app, you would fetch data here
  console.log('Doctor dashboard mounted')
})

function formatDate(dateString) {
  return dayjs(dateString).format('YYYY-MM-DD')
}

function formatDateTime(dateString, timeString) {
  return `${formatDate(dateString)} ${timeString}`
}

function viewPatientDetails(patientId) {
  // Navigate to patient details page
  router.push(`/doctor/patient/${patientId}`)
}

function viewSchedule() {
  // Navigate to schedule page or show schedule dialog
  ElMessage.info('Schedule view not implemented yet')
}

function startTreatment(patientId) {
  // Navigate to treatment page with patient id
  router.push(`/doctor/treatment?patientId=${patientId}`)
}

function getStatusType(schedule) {
  if (schedule.currentPatients >= schedule.maxPatients) {
    return 'danger'
  } else if (schedule.currentPatients > schedule.maxPatients * 0.8) {
    return 'warning'
  } else {
    return 'success'
  }
}

function getStatusText(schedule) {
  if (schedule.currentPatients >= schedule.maxPatients) {
    return 'Full'
  } else if (schedule.currentPatients > schedule.maxPatients * 0.8) {
    return 'Busy'
  } else {
    return 'Available'
  }
}

function getPatientStatusType(status) {
  if (status === 'Waiting') return 'info'
  if (status === 'In Progress') return 'warning'
  if (status === 'Completed') return 'success'
  if (status === 'Cancelled') return 'danger'
  return 'default'
}

function getActivityType(type) {
  if (type === 'treatment') return 'primary'
  if (type === 'order') return 'success'
  if (type === 'schedule') return 'warning'
  return 'info'
}
</script>

<style scoped>
.doctor-dashboard {
  padding: 20px;
}

.dashboard-card {
  margin-bottom: 20px;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.schedule-info {
  margin-bottom: 20px;
}
</style> 